<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>订单列表</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/mrs.css"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css"/>
    <script type="text/javascript" src="__FONT__/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
	  $(function(){
		
	  });
	</script>
    <style>
	/*底部菜单******************************************************************************************/	
	.nav {width: 100%;height: 50px;background-color: #fff;position: fixed;bottom: 0;left: 0;z-index: 2;}
	.nav li {float: left;width: 25%;text-align: center;font-size: 14px;}
	.nav li a {color: #616161;display: block;height: 50px;text-align: center;padding-top: 32px;}
	.nav li .first-bg {background: url(__FONT__/images/nav_01.png) no-repeat center 4px;background-size: auto 22px;}
	.nav li .sec-bg{background: url(__FONT__/images/nav_02.png) no-repeat center 4px;background-size: auto 26px;}
	.nav li .thr-bg {background: url(__FONT__/images/nav_03.png) no-repeat center 4px;background-size: auto 26px;}
	.nav li .four-bg {background: url(__FONT__/images/nav_04.png) no-repeat center 4px;background-size: auto 26px;}
	.nav li .cur{color: #f04877;}
	.nav li:nth-last-child(4) .cur{background: url(__FONT__/images/nav_list_01.png) no-repeat center 4px;background-size: auto 22px;}
	.nav li:nth-last-child(3) .cur{background: url(__FONT__/images/nav_list_02.png) no-repeat center 4px;background-size: auto 26px;}
	.nav li:nth-last-child(2) .cur{background: url(__FONT__/images/nav_list_03.png) no-repeat center 4px;background-size: auto 26px;}
	.nav li:nth-last-child(1) .cur{background: url(__FONT__/images/nav_list_04.png) no-repeat center 4px;background-size: auto 26px;}
		
	</style>
</head>
<body style="background:#f7f7f9;">
 	<section class="mrs_sec">
 		<foreach name="list" item="order">
       		<div class="mrs_order my_order" data-id="{$order.id}">
              <h1>{$order.beauty_name}
              		<eq name="order.status" value="2">
                   	<label>待消费</label>
                    </eq>
                    <eq name="order.status" value="1">
                    <label>待付款</label>
                    <label class="hide" style="display:none;">已取消</label>
                    </eq>
                    <eq name="order.status" value="5">
                    <label>已取消</label>
                    </eq>
                    <eq name="order.status" value="4">
                    <label>已完成</label>
                    </eq>
              </h1>
              <h2>服务项目：<span>{$order.service_name}</span><label>￥{$order.price}</label></h2>
              <div class="mrs_self">
                 <img src="__FONT__/images/btylist_01.png">
                 <dd>
                   <strong>美&nbsp;&nbsp;容&nbsp;&nbsp;师：<span>{$order.beautician.name}</span></strong>
                   <strong>服务时间：<span>{$order.service_time}分钟</span></strong>
                 </dd>
              </div>
              <div class="mrs_infor">
                   <strong>用户姓名：<span>猴塞累</span><label>13800138000</label></strong>
                   <strong>预约时间：<span>{$order.order_time|date="Y-m-d H:i:s",###}</span></strong>
                   <strong>服务地址：<span>{$order.service_address}</span></strong>
              </div>
              <div class="mrs_do">
                 <ul>
                 	<eq name="order.status" value="2">
                    <li><a href="javascript:void(0);" class="channel_btn cancelOrder">取消订单</a></li>
                    <li><a href="{:U('Order/pay/id/'.$order ['id'])}" class="mrs_btn">去支付</a></li>
                    </eq>
                    <eq name="order.status" value="1">
                    <li><a href="javascript:void(0);" class="channel_btn cancelOrder">取消订单</a></li>
                    <li><a href="beauty_pay_detailb.html" class="mrs_btn">查看订单</a></li>
                    <li class="hide" style="display:none;"><a href="" class="channel deleteOrder" ></a></li>
                    <li class="hide" style="display:none;"><a href="{:U('ServiceItem/reOrder/id/'.$order['id'])}" class="mrs_btn" >再次预约</a></li>
                    </eq>
                    <eq name="order.status" value="5">
                    <li><a href="" class="channel deleteOrder"></a></li>
                    <li><a href="{:U('ServiceItem/reOrder/id/'.$order['id'])}" class="mrs_btn">再次预约</a></li>
                    </eq>
                    <eq name="order.status" value="4">
                    <li><a href="{:U('ServiceItem/reOrder/id/'.$order['id'])}" class="channel_btn">再次预约</a></li>
                    <li><a href="{:U('Order/Comment/id/'.$order['id'])}" class="mrs_btn">去评价</a></li>
                    </eq>
                 </ul>
              </div>         
			</div>
       </foreach>
	</section>
    <include file="Public/footer" />
    <script>
    $(function () {
    	//功能：阻止事件默认行为
    	function stopDefault( e ) {
    	     // 阻止默认浏览器动作(W3C)
    	     if ( e && e.preventDefault ) {
    	         e.preventDefault();
    	     } else {
    	        // IE中阻止函数器默认动作的方式
    	        window.event.returnValue = false;
    	    }
    	    return false;
    	}
    	
    	var cancelOrder;
    	$('.cancelOrder').click(function (e) {
    		var _this = $(this),
    			wrap = $(_this).parents('div.my_order'),
    			id = $(wrap).attr('data-id');
    		
    		if (cancelOrder && cancelOrder.state() == 'pending') {
    			return false;
    		}
    		
    		cancelOrder = $.ajax({
    			url: '{:U("Order/cancel")}',
    			data:{id:id},
    			dataType: 'json',
    			success: function (result) {
					if (result.status) {
						$(wrap).find('h1 label.hide').show().prev().hide();
			    		$(_this).parents('li').siblings('.hide').show().siblings().not('.hide').hide();
					} else {
						alert(result.message);
						return false;
					}
				},
    			error: function () {
    				alert('请求中断，稍候再试');
    			}
    		});
    		
    		return false;
    	});
    	
    	var deleteOrder;
    	$('.deleteOrder').click(function (e) {
    		var _this = $(this),
    			wrap = $(_this).parents('div.my_order'),
    			id = $(wrap).attr('data-id');
    		
    		if (deleteOrder && deleteOrder.state() == 'pending') {
    			return false;
    		}
    		
    		deleteOrder = $.ajax({
    			url: '{:U("Order/delete")}',
    			data:{id:id},
    			dataType: 'json',
    			success: function (result) {
					if (result.status) {
						wrap.remove();
					} else {
						alert(result.message);
						return false;
					}
				},
    			error: function () {
    				alert('请求中断，稍候再试');
    			}
    		});
    		
    		return false;
    	});
    });
    </script>
</body>
</html>